<template>
  <div>
    <transition mode='out-in' appear
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div ref="ball" class="ball" v-show="ballFlag"></div>
    </transition>
    <div class="mui-card-content-inner">
      <swipe :isfull="false" :imgList="imgList"></swipe>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">商品名称</div>
      <div class="mui-card-content">
        <div class="mid mui-card-content-inner">
          <div class="price">市场价:<span>￥{{infolist.sell_price}}</span></div>
          <div class="nowPrice">销售价￥{{infolist.market_price}}</div>
          <div class="count">购买数量

            <div id="data1" class="mui-numbox" data-numbox-step='1'>
              <!-- "-"按钮，点击可减小当前数值 -->
              <button class="mui-btn mui-numbox-btn-minus" @click="add(-1)" type="button">-</button>
              <input class="mui-numbox-input" ref="myNum" type="number"  v-model="number
              "/>

              <!-- "+"按钮，点击可增大当前数值 -->
              <button class="mui-btn mui-numbox-btn-plus"  @click="add(+1)" type="button">+</button>
            </div>

          </div>
          <mt-button type='primary'>立刻购买</mt-button>
          <mt-button type='danger' @click="addShopCart">加入购物车</mt-button>
        </div>
      </div>
    </div>

    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <div>商品序号：{{infolist.goods_no}}</div>
          <div>存库信息：{{infolist.stock_quantity}}</div>
          <div>上架时间：{{infolist.add_time | dateFormat}}</div>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type='primary' size='large' plain @click="goDesc(id)">图文介绍</mt-button>
        <mt-button type='danger' size='large' plain @click="goCom(id)">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import swipe from '@/components/subComps/swipe'
import {api} from '@/common/api.js'
import { mapGetters, mapMutations } from 'vuex'

export default {
  data () {
    return {
      id: this.$route.params.id,
      imgList: [],
      infolist: [],
      number: 0,
      ballFlag: false
    }
  },
  created () {
    this.getimgList()
    this.getinfo()
  },
  mounted () {

  },
  computed: {
    ...mapGetters([
      'getGoodsCount'
      // 'count'
    ])
  },
  methods: {
    ...mapMutations({
      addCart: 'ADD_SHOPCATE',
      upDateShopCate: 'UPDATE_SHOPCATE'
    }),
    getimgList () {
      this.$axios.get(`${api}getthumimages/${this.id}`).then(res => {
        this.imgList = res.data.message
      }).catch(err => {
        console.log(err)
      })
    },
    getinfo () {
      this.$axios.get(`${api}goods/getinfo/${this.id}`).then(res => {
        this.infolist = res.data.message[0]
      }).catch(err => {
        console.log(err)
      })
    },
    goDesc (id) {
      this.$router.push({name: 'goodsdesc', params: {id: id}})
    },
    goCom (id) {
      this.$router.push({name: 'goodscomment', params: {id: id}})
    },
    add (n) {
      this.$refs.myNum.value = parseInt(this.$refs.myNum.value) + parseInt(n)
    },
    addShopCart () {
      this.ballFlag = !this.ballFlag
      var goodsinfo = {
        id: parseInt(this.id),
        count: parseInt(this.$refs.myNum.value),
        price: this.infolist.sell_price,
        selected: true
      }
      this.addCart(goodsinfo)
    },
    beforeEnter (el) {
      el.style.opacity = 0
      el.style.opacity = 1
      el.style.transform = 'translate(0,0)'
    },
    enter (el, done) {
      el.offsetTop

      const ballPosition = this.$refs.ball.getBoundingClientRect()
      const flagPosition = document.getElementById('flag').getBoundingClientRect()

      const changeX = flagPosition.left - ballPosition.left
      const changeY = flagPosition.top - ballPosition.top

      el.style.transform = `translate(${changeX}px,${changeY}px)`

      el.style.transition = 'all .4s cubic-bezier(.91,-0.02,.25,1)'
      done()
    },
    afterEnter (el) {
      this.ballFlag = !this.ballFlag
    }
  },
  components: {
    swipe
  }

}
</script>

<style lang="scss" scoped>
  .mid{
    div{
      margin: 5px 0 6px;
    }
  }
  .mui-card-footer{
    display: block;
    button{
      margin-bottom: 5px;
    }
  }
  .ball{
    background: red;
    border-radius: 50%;
    position: absolute;
    height:15px;
    width:15px;
    top: 412px;
    left: 137px;
    z-index: 888;
    //
  }
</style>
